<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>model</title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
    <mycom1>{{msg}}</mycom1>
</div>

</body>
<script>
    // 1.组件可以有自己data数据
    // 2.组件的data和实例的data有点不一样，实例中的data可以为一个对象，但是组件中的data必须是一个方法
    // 3.组件中的data除了必须为一个方法之外，这个方法内部，还必须返回一个对象才行
    // 4.组件中的data数据和实例中的data使用方式完全一样！！！
    Vue.component('mycom1', {
        template: '<h1>这是全局组件 -- {{this.msg}}</h1>',
        data: function(){
            return {
                msg: '这是组件中data定义的数据'
            };
        }
    });


var vm = new Vue({
    el: '#app',
    data: {
        msg: '大家好哈哈哈哈，你们好啊。'
    },
    methods:{

    }

})
</script>
</html>